import { Button, Form, Input, NavBar } from "antd-mobile";
import { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { lodaDetailApI } from "../../services/list";
import { dalImg } from "../../utils/tools";

function Dialog() {
  const nav = useNavigate();
  const back = () => nav("/lists");
  //获取id
  const params = useParams();
  console.log(params);
  const [info, setInfo] = useState({});
  useEffect(() => {
    //获取医生数据
    lodaDetailApI(params.id).then((res) => setInfo(res.data));
  }, []);
  // console.log(info);
  return (
    <div className="dialog-list">
      <NavBar onBack={back} style={{ background: "pink" }}>
        好大夫咨询
      </NavBar>
      <div className="dia-main">
        <div className="doctor-dia">
          <img
            src={dalImg(info.avatar)}
            alt={info.name}
            style={{ maxWidth: "30px" }}
          />
          <span>{info.name}</span>
          <p>这病治不了</p>
        </div>
      </div>
      <div className="dia-ipt">
        <Form>
          <Form.Item>
            <Input placeholder="请输入问题" />
            <Button color="primary" type="submit">
              发送
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}

export default Dialog;
